<template>
  <div class="com-server-content">
    <div class="item-header-box">
      <img src="@/assets/image/com-header.png" class="header-icon" alt="" />
    </div>
    <div class="item-box">
      <div class="item-img-box">
        <img
          src="@/assets/image/com-header-wx.png"
          class="item-icon-1"
          alt=""
        />
      </div>

      <div class="item-text">微信客服</div>
      <div class="wx-qrcode hover-content">
        <div class="triangle-right"></div>
        <div class="qrcode-bg">
          <div class="code-item">
            <div class="code-img-box">
              <img
                src="@/assets/image/com-header-code.png"
                class="code-img"
                alt=""
              />
            </div>
            <div class="code-text">客服小袁</div>
          </div>
          <div class="code-item">
            <div class="code-img-box">
              <img
                src="@/assets/image/com-header-code.png"
                class="code-img"
                alt=""
              />
            </div>
            <div class="code-text">客服小袁</div>
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <div class="item-img-box">
        <img
          src="@/assets/image/com-header-share.png"
          class="item-icon-2"
          alt=""
        />
      </div>
      <div class="item-text">分享有礼</div>
    </div>
    <div class="item-box">
      <div class="item-img-box">
        <img
          src="@/assets/image/com-header-tel.png"
          class="item-icon-3"
          alt=""
        />
      </div>
      <div class="item-text">免费电话</div>
    </div>
    <div class="item-box">
      <div class="item-img-box">
        <img
          src="@/assets/image/com-header-rc.png"
          class="item-icon-4"
          alt=""
        />
      </div>
      <div class="item-text">人才招聘</div>

      <div class="tel-content hover-content">
        <div class="tel-text">
          免费通话：
          <span class="tel">400-888-18888</span>
          24小时在线咨询
        </div>
        <div class="tel-input-box">
          <input type="text" class="tel-input" placeholder="请输入您的电话" />
        </div>
        <div class="tel-tips">我们的客服将第一时间回拨给您！</div>
        <div class="tel-btn">
          <com-button type="primary" size="small">免费通话</com-button>
        </div>
        <div class="triangle-right"></div>
      </div>
    </div>
    <div class="item-box" @click="goTop">
      <div class="item-img-box">
        <img
          src="@/assets/image/com-header-go-back.png"
          class="item-icon-5"
          alt=""
        />
      </div>
      <div class="item-text">返回顶部</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import comButton from "../com-button/com-button.vue";
// import { withDefaults, defineProps, defineEmits, computed } from "vue";

const goTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "@/style/var.less";
@import "./com-server.less";
</style>
